import React, { useEffect, useState } from 'react';
import { urlWork } from 'nui';
import { load_id } from '../cmd/load';
import { FixValue } from './value';
import { for_obj, Dlg, no_del, PanelTitle, useCmd, GridTable, BtTxt, is_empty, Btn, loc } from 'sui';

const FixDlg = ({ data, mod, open, setOpen, hcmd }) => {
    const [row, setRow] = useState();
    const [open_val, openVal] = useState(false);
    const umd = useCmd(null, "value");

    useEffect(() => {
        const tmp = [];
        for_obj(data, (k, v) => tmp.push({m: k, v: v}));

        setRow(tmp);
    }, [data]);

    const hdone = () => {
        umd.startWait();

        load_id(mod, v => {
            const ret = {};

            for_obj(v, (tk, tv) => {
                if (tk === "f") {
                    return;
                }

                ret[tk] = tv;
            });

            if (!is_empty(row)) {
                const f = {};
                row.forEach(d => f[d.m] = d.v);

                ret["f"] = f;
            }

            urlWork(null, "config/update", {mod: "it", v: [ret]},
                r => {
                    load_id(mod, v => {
                        umd.endWait();

                        setOpen(false);
                        hcmd(v);
                    });
                }, e => umd.setWrong(loc("xgsb")));
        });
    };

    const hadd = (v) => {
        let tmp = [];

        if (!is_empty(row)) {
            tmp = row.filter(d => d.m !== v.m);
            if (umd.cur) {
                tmp = row.filter(d => d.m !== umd.cur.m);
            }
        }

        tmp.push(v);

        setRow(tmp);
    };

    const hedit = (m) => {
        const f = row.find(d => d.m === m);
        if (f) {
            umd.hcur(f);
            openVal(true);
        }
    };

    const hdel = (m) => {
        if (no_del()) {
            return;
        }

        const tmp = [];

        row.forEach(d => {
            if (d.m === m) {
                return;
            }

            tmp.push(d);
        });

        setRow(tmp);
    };

    const Right = () => (
        <Btn className="mr-4" hcmd={() => {
            umd.hcur(null);
            openVal(true);
        }}>{loc("cmd_40")}</Btn>
    );

    const col = [
        {name: loc("cz"), key: 'e_opt', width: 180, formatter: props => {
            const d = props.row;
            return (
                <div className="inline-flex">
                    <BtTxt hcmd={() => hdel(d.m)}>{loc("sc")}</BtTxt>
                    <BtTxt hcmd={() => hedit(d.m)}>{loc("xg")}</BtTxt>
                </div>
            );
        }},
        {name: loc("mbq"), key: 'm', width: 200},
        {name: loc("cmd_60"), key: 'v', width: 100, formatter: props => {
            const d = props.row;
            return "" + d.v;
        }},
    ];

    return (
        <Dlg open={open} title={loc("mg_282")} hcancel={() => setOpen(false)} hcmd={hdone}>
            <PanelTitle right={<Right/>} cl="gray"/>
            <GridTable col={col} row={row} high={300}/>
            <FixValue open={open_val} setOpen={openVal} hcmd={hadd} cur={umd.cur} row={row}/>
        </Dlg>
    );
};

export {FixDlg};
